<template>
	<view class="mask">
	    <view>
			<view class="media-foot">
				<view class="left"><image class="photo" :src="price1.avatar"></image></view>
			<view class="price">
				<!-- {{price1.avatar}} -->
				<view class="">
					预约价格：{{price1.playPrice/100}}元/60分钟
				</view>
				
				<view class="time">
					{{pleaseChoose}}
				</view>
			</view>
			</view>
	    	
			<!-- 选择陪玩时长 -->
			<view class="">
				<view class="top">
					<view class="shichang">
					请选择时长：
				</view>
				<view class="chooseTime">
				<text :class="['ontext',isActive==index?'active':'']" v-for="(item,index) in chooseList" :key="index" @click="choose(item.name,index)">
					{{item.name}}分
				</text>
				 </view>
				</view>
				
				 <view class="shenm">
					 <view class="must">
					 	用户快速下单须知
					 </view>
				 	
				 	1、用户下单成功后，需扫码微信支付，并联系管理员确认订单</br>
				 	2、陪玩若不能立即接单可找管理员申诉，平台将对陪玩进行处罚并返还用户相应服务费用</br>
				 	3、陪玩时间到，订单自动关闭</br>
				 	4、平台暂未支持线下陪玩，请勿私自预约线下陪玩，由此产生的意外后果与平台和推介人无关
				 </view>
				 <u-button class="totalPrice" @click="pay('warn')">确认订单（总价：{{totalPrice}}元）</u-button>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提示" content="确定生成该订单？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	let oText=document.getElementsByClassName('ontext');
	export default{
		props:["price1"],
		data(){
			return{
				id:null,
				msgType: 'success',
				time:null,
				price:50,
				isActive:'',
				pleaseChoose:'时长：60分钟',
				 chooseList: [{
				            name: '60'
				          },
				            {
				              name: '120'
				            },
				            {
				              name: '180'
				            }, 
							{
				              name: '240'
				            }
				          ],
			}
		},
		methods:{
			//下订单
			addOrder:async function(accountId,playAccountId,totalPrice,payPrice,payState,orderState,orderTime){
				let params={
					accountId,
					playAccountId,
					totalPrice,
					payPrice,
					payState,
					orderState,
					orderTime
				}
				const res = await this.$api.addOrder(params)
				console.log(res.data)
				this.id=res.data
				// console.log(this.id)
				uni.navigateTo({
					url:'../../pages/payDetail/payDetail?id='+this.id
				})
			},
			// 确定不取消订单
			dialogConfirm(){
				let accountid=JSON.parse(localStorage.getItem('user')).id
				// console.log(accountid)
				let paystate=0;
				let orderstate=0
				console.log(this.time=='60分钟')
				let orderTime=this.time==='60'?'1':this.time=='120'?'2':this.time=='180'?3:4
				console.log(this.price1.id,this.totalPrice,this.showPrice,paystate,orderstate,orderTime)
				this.addOrder(accountid,this.price1.id,this.showPrice,this.totalPrice,paystate,orderstate,orderTime)
			},
			// 取消订单
			dialogClose(){
				console.log('取消')
			},
			//立即支付
			pay(type){
				this.msgType = type
				this.$refs.alertDialog.open()
				// console.log(this.price1)
				
				// console.log(this.pleaseChoose)
			},
			//选择时长
			choose(time,index){
				console.log(index)
				console.log(oText[index])
				this.isActive=index;
				this.time=time
				this.pleaseChoose='时长：'+time+'分钟'
				// this.style.backgroundColor='yellow'
			},
		},
		computed:{
			totalPrice(){
				return this.price1.playPrice*(this.isActive+1)/100
			},
			showPrice(){
				return this.price1.showPrice*(this.isActive+1)/100
			}
		}
	}
</script>

<style scoped lang="scss">
	.photo{
		  width: 160rpx;
		  height: 160rpx;
		  border-radius: 50%;
	}
	.left{
		  width: 30%;
		  position: relative;
	}
	.price{
		  flex: 1;
		 text-align: left;
		 margin-top:35rpx ;
	}
	.time{
		  color: #9d9d9d;
		  margin-top: 10rpx;
		  // padding: 25rpx;
		  // text-align: left;
	}
	.chooseTime{
		      flex-direction: row;
			  /* display: inline-block; */
	}
	.chooseTime>text{
		  /* border: 1px solid black; */
		  
		  padding: 8rpx 3rpx;
		  width: 32%;
		  display: inline-block;
		  margin: 10rpx;
		  /* float: -webkit-box-left; */
	}
	.shichang{
		  float: left;
		  text-align: left;
		  margin: 15rpx 0 15rpx 5rpx;
		  font-size: 20px;
	}
	.u-button{
		  // margin-top: 25rpx;
		  background-color: rgb(118, 237, 214);
		  color: white;
		  font-size: 37rpx;
	}
	.active{
		  background-color: rgba(213, 208, 207, 0.6);
		  border-radius: 4rpx;
	}
	.shenm{
		text-align: left;
		color: #9d9d9d;
		font-size: 23rpx;
		border: 1px solid #ccc;
		border-radius: 15rpx;
		padding: 15rpx;
		margin: 10rpx 0;
	}
	.must{
		color: red;
		font-size: 28rpx;
	}
	// .top{
	// 	border: 1px solid grey;
	// }
	.media-foot{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>